<template>
    <el-dialog :title="$t('game.setting.game.dialog.create')" width="600px" :visible.sync="dialogVisible" @close="$emit('update:visible', false)">
        <div class="pr-12">
            <el-form :model="dataCache" label-width="auto">
                <el-form-item :label="$t('game.setting.game.name')" :error="Boolean(msg.errors['name']) ? msg.errors['name'][0] : ''" required>
                    <el-input v-model="dataCache.name"></el-input>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.code')" :error="Boolean(msg.errors['code']) ? msg.errors['code'][0] : ''" required>
                    <el-input v-model="dataCache.code"></el-input>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.type')" :error="Boolean(msg.errors['type']) ? msg.errors['type'][0] : ''" required>
                    <el-input v-model="dataCache.type" placeholder="match, slo, multi, fish"></el-input>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.category')" :error="Boolean(msg.errors['category']) ? msg.errors['category'][0] : ''" required>
                    <el-select v-model="dataCache.category" multiple class="block">
                        <el-option v-for="(item, index) in $t('game.setting.game.categories')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.grade')" :error="Boolean(msg.errors['grade']) ? msg.errors['grade'][0] : ''" required>
                    <el-select v-model="dataCache.grade" class="block">
                        <el-option v-for="(item, index) in $t('game.setting.game.grades')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.index')" :error="Boolean(msg.errors['index']) ? msg.errors['index'][0] : ''" required>
                    <el-input v-model.number="dataCache.index" type="number" :placeholder="$t('game.setting.game.dialog.index')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.base_user_num')" :error="Boolean(msg.errors['base_user_num']) ? msg.errors['base_user_num'][0] : ''" required>
                    <el-input v-model.number="dataCache.base_user_num" type="number"></el-input>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.private')" :error="Boolean(msg.errors['private']) ? msg.errors['private'][0] : ''">
                    <component-page-org-tree-option-check v-model="dataCache.private" check-strictly block></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item :label="$t('game.setting.game.index_type')" :error="Boolean(msg.errors['index_type']) ? msg.errors['index_type'][0] : ''" required>
                    <el-select v-model="dataCache.index_type" class="block">
                        <el-option v-for="(item, index) in $t('game.setting.game.index_types')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                    <el-button @click="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "ItemCreate",
    props: ['visible'],
    data() {
        return {
            dialogVisible: false,
            dataCacheInit: {},
            dataCache: {
                index: null,
                name: '',
                type: '',
                code: '',
                category: [],
                grade: null,
                index_type: 0,
                base_user_num: 0,
                private: [],
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            }
        }
    },
    created() {
        this.dataCacheInit = _.cloneDeep(this.dataCache);
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 初始化参数
                this.initData();
                // 显示模态框
                this.dialogVisible = n;
            }
        }
    },
    methods: {
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        initData() {
            this.initMsg();
            this.dataCache = _.cloneDeep(this.dataCacheInit);
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/game/saveItem', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.new')}),
                        showClose: true
                    });
                    this.dialogVisible = false;
                    // 广播事件到父组件
                    this.$emit('create');
                } else if (_.includes([42000, 44200], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.new')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
